/**
 * 图标选择
 * onDoubleClick
 */
import React, { PureComponent, Fragment } from 'react';
import {
    Col,
    Row,
    Card,
    Tree,
    Empty,
    Table
  } from 'antd';
import { connect } from 'dva';
import StandardTable from '@/components/StandardTable';
const { TreeNode } = Tree;
@connect(({ authRole, loading }) => ({
    authRole,
    loading: loading.models.authRole,
}))
class RoleMenu extends PureComponent {
  state = {
    selectedRows: []
  };

  columns = [
    {
      title: '编码',
      dataIndex: 'perms',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
  ];
  componentDidMount() {
    const { dispatch ,roleId} = this.props;
    dispatch({
        type: 'authRole/menuFetch',
        payload:{}
    });
    console.log('roleId====>',roleId)
    dispatch({
        type: 'authRole/findAuthorityIdByRoleId',
        payload:{
            roleId:roleId
        },
        callback: (result) => {
            dispatch({
                type: 'authRole/commonEffect',
                payload:{
                  resourceIds:result,
                }
              })
        },
    })
  }
  /**
   * 选择树节点
   */
  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.name} key={item.menuId} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.menuId} title={item.name} {...item} dataRef={item} />;
});
onSelectSingleRow=(record, selected, selectedRows, nativeEvent)=>{
    let { authRole:{resourceIds,menuIdList,halfCheckedKeys,menuTree},dispatch }=this.props;
    if(selected){
        resourceIds.push(record.menuId);
        dispatch({
            type: 'authRole/commonEffect',
            payload:{
                resourceIds:resourceIds
            }
          })
        //行选中左边菜单选中
        let menuId=record.menuId;
        if(menuIdList.indexOf(menuId)==-1){
            menuIdList.push(menuId);
            dispatch({
                type: 'authRole/getMenu',
                payload:{
                    menuId:menuId
                }
            }).then((result)=>{
                if(result){
                    let parentId=result.parentId;
                    if(halfCheckedKeys.indexOf(parentId)==-1){
                        halfCheckedKeys.push(parentId);
                    }
                }
                dispatch({
                    type: 'authRole/commonEffect',
                    payload:{
                        menuIdList:menuIdList,
                        halfCheckedKeys:halfCheckedKeys
                    }
                  })
            })
        }
    }else{
        let index=resourceIds.indexOf(record.menuId);
        if (index > -1) {
            resourceIds.splice(index, 1);
        }
        dispatch({
            type: 'authRole/commonEffect',
            payload:{
                resourceIds:resourceIds
            }
        })
    }
    this.setState({
        selectedRows: selectedRows,
    });
}
    
/**
 * 菜单选中
 */
onSelect=(selectedKeys, e)=>{
    const { dispatch } = this.props;
    if(selectedKeys&&selectedKeys.length>0){
        dispatch({
          type: 'authRole/commonEffect',
          payload:{
            selectedKeys:selectedKeys,
          }
        }).then(()=>{
          this.resourceFetch()
        })
      }
}
/**
 * 复选框选中
 */
onCheck=(checkedKeys, e)=>{
    let halfCheckedKeys=e.halfCheckedKeys;
    console.log('checkedKeys=====》',checkedKeys,halfCheckedKeys)
    const { dispatch } = this.props;
    dispatch({
      type: 'authRole/common',
      payload:{
        menuIdList:checkedKeys,
        halfCheckedKeys:halfCheckedKeys
      }
    });
  }
resourceFetch=()=>{
    const {authRole:{selectedKeys},dispatch}=this.props;
    if(selectedKeys&&selectedKeys.length>0){
      dispatch({
        type: 'authRole/resourceFetch',
        payload: {
            menuId:selectedKeys[0]
        },
      });
    }else{
      dispatch({
        type: 'authRole/common',
        payload: {
          resourceData: {
            list: [],
            pagination: {
              total:0
            },
         }
        }
      });
    }
  }
  render() {
    const {
        authRole: {
            resourceData,
            menuTree,
            selectedKeys,
            resourceIdList,
            resourceIds,
            menuIdList
        },
        loading,
    } = this.props;
    const rowSelection={
        hideDefaultSelections:true,
        selectedRowKeys:resourceIds,
        getCheckboxProps: record => ({
            disabled: record.disabled,
        }),
        onChange:(selectedRowKeys, selectedRows)=>{
            console.log('selectedRowKeys==>',selectedRowKeys,selectedRows)
        },
        onSelect:this.onSelectSingleRow
    }
    return <Row gutter={12}>
        <Col xs={24} sm={11}>
            <Card title="菜单" >
            {
                menuTree&&menuTree.length?<Tree
                 checkable
                 autoExpandParent
                 defaultExpandAll
                 onSelect={this.onSelect}
                 onCheck={this.onCheck}
                 selectedKeys={selectedKeys}
                 checkedKeys={menuIdList}
                 blockNode={true}
               >
                {this.renderTreeNodes(menuTree)}
               </Tree>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              }
            </Card>
        </Col>
        <Col xs={24} sm={13}>
            <Card title="资源">
                <Table
                rowKey={"menuId"}
                rowSelection={rowSelection}
                loading={loading}
                dataSource={resourceData.list}
                columns={this.columns}
                pagination={false}
                bordered
                />
            </Card>
        </Col>
    </Row>;
  }
}

export default RoleMenu;
